// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and stuff

.nom-modal-open {
  // Kill the scroll on the body
  overflow: hidden;

  .nom-modal {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

// Container that the modal scrolls within
.nom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  // See also https://github.com/twbs/bootstrap/issues/17695
  overflow-y: auto;
  background-color: var(--nom-layer-backdrop-color);
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;
}

// Shell div to position the modal with bottom padding
.nom-modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  // allow clicks to pass through for custom click handling to close modal
  pointer-events: none;
}

.nom-modal-dialog-scrollable {
  display: flex; // IE10/11
  max-height: calc(100% - 1rem);

  .nom-modal-content {
    max-height: calc(100vh - 1rem); // IE10/11
    overflow: hidden;
  }

  .panel-header,
  .panel-ft {
    flex-shrink: 0;
  }

  .panel-body {
    overflow-y: auto;
  }
}

.nom-modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);

  // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
  // &::before {
  //   display: block; // IE10
  //   height: calc(100vh - 1rem);
  //   content: '';
  // }

  // Ensure `.modal-body` shows scrollbar (IE10/11)
  &.nom-modal-dialog-scrollable {
    flex-direction: column;
    justify-content: center;
    height: 100%;

    .nom-modal-content {
      max-height: none;
    }

    &::before {
      content: none;
    }
  }
}

// Actual modal
.nom-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
  background-color: var(--nom-layer-background-color);
  background-clip: padding-box;
  border: var(--nom-layer-border);
  border-radius: var(--nom-layer-border-radius);
  // Remove focus outline from opened modal
  outline: 0;
  box-shadow: var(--nom-layer-box-shadow);
  // counteract the pointer-events: none; in the .modal-dialog
  pointer-events: auto;

  >.nom-panel-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--nom-border-color);
    border-top-left-radius: var(--nom-layer-border-radius);
    border-top-right-radius: var(--nom-layer-border-radius);
  }

  >.nom-panel-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
  }

  >.nom-panel-footer {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--nom-border-color);
    border-bottom-right-radius: var(--nom-layer-border-radius);
    border-bottom-left-radius: var(--nom-layer-border-radius);
  }
}

// Modal sizes
.nom-modal {
  &.p-size-xsmall {
    .nom-modal-dialog {
      width: 300px;
    }
  }

  &.p-size-small {
    .nom-modal-dialog {
      width: 560px;
    }
  }

  &.p-size-middle {
    .nom-modal-dialog {
      width: 960px;
    }
  }

  &.p-size-medium {
    .nom-modal-dialog {
      width: 960px;
    }
  }

  &.p-size-large {
    .nom-modal-dialog {
      width: 1200px;
    }
  }

  &.p-size-xlarge {
    .nom-modal-dialog {
      width: 100vw;
    }
  }
}

// Scale up the modal
@media (min-width: @screen-sm-min) {

  // Automatically set modal's width for larger viewports
  .nom-modal-dialog {
    width: 560px;
    margin: 1.75rem auto;
  }

  .p-fit .nom-modal-dialog {
    height: calc(100% - 3.5rem);
  }

  // Modal sizes
  .nom-modal-sm {
    .nom-modal-dialog {
      width: 300px;
    }
  }
}

.nom-modal-content-animate-show {
  -webkit-animation: nom-modal-content-keyframe-show .12s cubic-bezier(0, 0, .26, 1.38) forwards;
  animation: nom-modal-content-keyframe-show .12s cubic-bezier(0, 0, .26, 1.38) forwards;
}

.nom-modal-content-animate-hide {
  -webkit-animation: nom-modal-content-keyframe-hide 90ms ease forwards;
  animation: nom-modal-content-keyframe-hide 90ms ease forwards;
}

.nom-modal-mask-animate-show {
  -webkit-animation: nom-modal-mask-keyframe-show 90ms ease forwards;
  animation: nom-modal-mask-keyframe-show 90ms ease forwards;
}

.nom-modal-mask-animate-hide {
  -webkit-animation: nom-modal-mask-keyframe-hide 90ms ease forwards;
  animation: nom-modal-mask-keyframe-hide 90ms ease forwards;
}



@-webkit-keyframes nom-modal-content-keyframe-show {
  0% {
    -webkit-transform: scale(.7);
    transform: scale(.7);
    opacity: 0;
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes nom-modal-content-keyframe-show {
  0% {
    -webkit-transform: scale(.7);
    transform: scale(.7);
    opacity: 0;
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes nom-modal-content-keyframe-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(.7);
    transform: scale(.7);
    opacity: 0;
  }
}

@keyframes nom-modal-content-keyframe-hide {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(.7);
    transform: scale(.7);
    opacity: 0;
  }
}

@-webkit-keyframes nom-modal-mask-keyframe-show {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes nom-modal-mask-keyframe-show {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes nom-modal-mask-keyframe-hide {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes nom-modal-mask-keyframe-hide {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
